<template>
  <NCard size="small">
    <div class="flex justify-between items-center">
      <p class="text-lg font-bold">更新日志管理</p>
      <div class="flex gap-2">
        <NButton type="default" @click="getUpdateLog()">刷新</NButton>
        <NButton
          type="info"
          @click="
            () => {
              update = false
              drawer = true
            }
          "
          >新增</NButton
        >
      </div>
    </div>
  </NCard>
  <NDataTable bordered :columns="columns" :data="updateLogList"> </NDataTable>
  <NDrawer v-model:show="drawer" :width="502" :placement="'right'" :on-update:show="closeDrawer">
    <NDrawerContent v-if="!view" :title="update ? '修改' : '新增'">
      <NForm
        ref="formRef"
        :rules="rules"
        :model="formData"
        :show-feedback="true"
        :show-require-mark="true"
      >
        <NFormItem label="更新标题" path="logTitle">
          <NInput placeholder="请输入更新标题" v-model:value="formData.logTitle" />
        </NFormItem>
        <NFormItem label="更新内容" path="logData">
          <NInput placeholder="请输入更新内容" v-model:value="formData.logData" />
        </NFormItem>
        <NFormItem label="更新版本" path="logVersion">
          <NInput placeholder="请输入更新版本" v-model:value="formData.logVersion" />
        </NFormItem>
      </NForm>
      <template #footer>
        <NButton @click="drawer = false">取消</NButton>
        <NButton class="ml-2" type="info" @click="submit">确定</NButton>
      </template>
    </NDrawerContent>
    <NDrawerContent v-else :title="'查看'">
      <NList bordered show-divider>
        <NListItem>
          <template #prefix>
            <p class="w-[3em]">ID</p>
          </template>
          {{ formData.id }}
        </NListItem>
        <NListItem>
          <template #prefix>
            <p class="w-[3em]">标题</p>
          </template>
          {{ formData.logTitle }}
        </NListItem>
        <NListItem>
          <template #prefix>
            <p class="w-[3em]">内容</p>
          </template>
          {{ formData.logData }}
        </NListItem>
        <NListItem>
          <template #prefix>
            <p class="w-[3em]">版本</p>
          </template>
          {{ formData.logVersion }}
        </NListItem>
        <NListItem>
          <template #prefix>
            <p class="w-[3em]">时间</p>
          </template>
          {{ formData.logTime }}
        </NListItem>
      </NList>
    </NDrawerContent>
  </NDrawer>
</template>

<script setup lang="ts" name="">
import { h, ref } from 'vue'
import {
  NButton,
  NDataTable,
  NCard,
  NDrawer,
  NDrawerContent,
  NPopconfirm,
  NForm,
  NFormItem,
  NInput,
  useMessage,
  NList,
  NListItem,
} from 'naive-ui'
import {
  addUpdateLogAPI,
  changeUpdateLogAPI,
  delUpdateLogAPI,
  getUpdateLogAPI,
} from '@/api/updateLog'
defineOptions({
  name: 'updateLog',
})
const message = useMessage()
/** 数据列表 */
const updateLogList = ref([])
/** 列配置 */
const columns = [
  {
    title: 'ID',
    key: 'id',
  },
  {
    title: '标题',
    key: 'logTitle',
  },
  {
    title: '内容',
    key: 'logData',
    ellipsis: {
      tooltip: true,
    },
  },
  {
    title: '更新日志版本',
    key: 'logVersion',
  },
  {
    title: '时间',
    key: 'logTime',
  },
  {
    title: '操作',
    key: 'actions',
    render(row: {
      id: string
      logTitle: string
      logData: string
      logVersion: string
      logTime: string
    }) {
      return h(
        'div',
        {
          style: { display: 'flex', gap: '5px' },
        },
        [
          h(
            NButton,
            {
              type: 'primary',
              strong: true,
              size: 'small',
              onClick: () => {
                view.value = true
                drawer.value = true
                formData.value = row
              },
            },
            { default: () => '查看' },
          ),
          h(
            NButton,
            {
              type: 'info',
              strong: true,
              size: 'small',
              onClick: () => {
                update.value = true
                drawer.value = true
                formData.value = row
              },
            },
            { default: () => '修改' },
          ),
          h(
            NPopconfirm,
            {
              positiveText: '确定',
              negativeText: '取消',
              onPositiveClick: () => {
                delUpdateLog(row)
              },
            },
            {
              trigger: h(
                NButton,
                {
                  type: 'error',
                  strong: true,
                  size: 'small',
                },
                { default: () => '删除' },
              ),
              default: () => '确定删除吗？',
            },
          ),
        ],
      )
    },
  },
]
/** 更新/新增 */
const update = ref(false)
/** 查看 */
const view = ref(false)
/** 抽屉flag */
const drawer = ref(false)
/** 表单实例 */
const formRef = ref()
/** 表单数据 */
const formData = ref({
  id: '',
  logTitle: '',
  logData: '',
  logVersion: '',
  logTime: '',
})
/** 验证规则 */
const rules = ref({
  logTitle: [
    {
      required: true,
      message: '请输入更新标题',
      trigger: 'blur',
    },
  ],
  logData: [
    {
      required: true,
      message: '请输入更新内容',
      trigger: 'blur',
    },
  ],
  logVersion: [
    {
      required: true,
      message: '请输入更新版本',
      trigger: 'blur',
    },
  ],
})

function closeDrawer() {
  drawer.value = false
  formData.value = {
    id: '',
    logTitle: '',
    logData: '',
    logVersion: '',
    logTime: '',
  }
}
async function submit() {
  const res = await formRef.value.validate()
  if (res.warnings == undefined) {
    if (update.value) {
      await changeUpdateLog()
    } else {
      await addUpdateLog()
    }
  }
}

/** 获取更新日志列表 */
async function getUpdateLog() {
  const res = await getUpdateLogAPI()
  updateLogList.value = res.data.reverse()
}
getUpdateLog()
/** 新增更新日志 */
async function addUpdateLog() {
  const res = await addUpdateLogAPI({
    logTitle: formData.value.logTitle,
    logData: formData.value.logData,
    logVersion: formData.value.logVersion,
  })
  if (res.code == 200) {
    message.success('新增成功')
    closeDrawer()
    getUpdateLog()
  } else {
    message.error(res.msg)
  }
}
/** 修改更新日志 */
async function changeUpdateLog() {
  const res = await changeUpdateLogAPI({
    id: formData.value.id,
    logTitle: formData.value.logTitle,
    logData: formData.value.logData,
    logVersion: formData.value.logVersion,
  })
  if (res.code == 200) {
    message.success('修改成功')
    closeDrawer()
    getUpdateLog()
  } else {
    message.error(res.msg)
  }
}
/** 删除更新日志 */
async function delUpdateLog(row: {
  id: string
  logTitle: string
  logData: string
  logVersion: string
}) {
  const res = await delUpdateLogAPI({ ids: row.id })
  console.log(res)
  if (res.code == 200) {
    message.success('删除成功')
    getUpdateLog()
  } else {
    message.error(res.msg)
  }
}
</script>

<style scoped></style>
